<template>
	<view class="r_content">
		<view class="recode_top">
			<view class="recode_top_item">
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date1" @change="bindDateChange1">
						<view class="uni-input time_txt">{{date1}}</view>
					</picker>
				</view>
			</view>
			<text class="recode_top_center">至</text>
			<view class="recode_top_item">
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" @change="bindDateChange">
						<view class="uni-input time_txt">{{date}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="recode_container" style="height: calc(100vh - 25px);overflow: scroll;">
			<view v-if="recodeLists.length > 0">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: calc(100vh - 25px);width: 100%;" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">
					<view id="demo1" v-for="(item, index) in recodeLists" v-bind:key="index" class="scroll-view-item">
						<view class="scroll_top">
							<text class="scroll_title">校园卡充值</text>
							<text class="scroll_moeny">{{item.amount}}</text>
						</view>
						<view class="scroll_bottom">
							<text class="scroll_type">{{item.cardNo}}</text>
							<text class="scroll_time">{{item.gmtCreate}}</text>
						</view>
					</view>
					<view class="no_box">
						<text class="scroll_time">没有更多数据啦~</text>
					</view>
				</scroll-view>
			</view>
			<view class="no_con" v-else>
				<text class="stu_item_txt">目前还没有充值记录!</text>
			</view>
		</view>
		<mcModal :isShow="showMcModal" :content="content" :title="title" :showCancel="false" :inp="false" @ok='cc()' okBtn='确定'></mcModal>
	</view>
</template>

<script>
	import {findRecharge} from '../../common/api/index'
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	export default {
		components: {
			mcModal
		},
	    data() {
	        const currentDate = this.getDate({
	            format: true
	        })
			const currentDate1 = this.getDate1({
			    format: true
			})
	        return {
	            date: currentDate,
	            date1: currentDate1,
				scrollTop: 0,
				recodeObj: {},
				recodeLists: [],
				walletId: '',
				accountId: '',
				orgId: '',
				walletObj: {},
				showMcModal: false,
				content: '',
				title: '',
				currentPage:1
	        }
	    },
		onShow:function(){
			this._queryRecode()
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.walletObj = {...JSON.parse(decodeURIComponent(option.walletObj))}
		},
		computed: {
			getNo(no) {
				return function(no) {
					return "深圳农商行"  + "*****" + String(no).substr(-4)
				}
			}
		},
	    methods: {
			cc() {
				this.showMcModal = false
			},
			bindDateChange1: function(e) {
				this.date1 = e.target.value
				this.date1 = this.date1.toString().replace(/\//g, "-")
				this._queryRecode()
			},
			_queryRecode() {
				uni.showLoading({
					title: '加载中...'
				})
				findRecharge({
					cardNo: this.walletObj.cardNo,
					beginDate: this.date1+" 00:00:00",
					endDate: this.date+" 23:59:59",
					walletId: this.walletObj.walletId,
					orgId: this.walletObj.orgId,
					currentPage: this.currentPage,
					pageSize: 10
				}).then(res => {
					if(res.code == 0){
						this.recodeLists = this.recodeLists.concat(res.data)
						uni.hideLoading()
					} else {
						this.title = '操作失败'
						this.content =  res.msg
						this.showMcModal = true
					}
				}).catch(err => {
					this.title = '温馨提示'
					this.content =  '系统错误!'
					this.showMcModal = true
					console.log(err)
				})
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				this.currentPage += 1
				this._queryRecode()
			},
			scroll: function(e) {
				// console.log(e)
				// this._queryRecode()
				// this.old.scrollTop = e.detail.scrollTop
			},
	        bindDateChange: function(e) {
	            this.date = e.target.value
				this.date = this.date.toString().replace(/\//g, "-")
				this._queryRecode()
	        },
	        getDate(type) {
	            const date = new Date();
	            let year = date.getFullYear();
	            let month = date.getMonth() + 1;
	            let day = date.getDate();
				
	            month = month > 9 ? month : '0' + month;;
	            day = day > 9 ? day : '0' + day;
	            return `${year}-${month}-${day}`;
	        },
			getDate1(type) {
			    const date = new Date();
				date.setMonth(date.getMonth()-1);
			    let year = date.getFullYear();
			    let month = date.getMonth();
			    let day = date.getDate();
				
			    month = month > 9 ? month : '0' + month;;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			}
	    }
	}
</script>

<style lang="scss">
	.r_content {
		.recode_top {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1px solid rgba(242, 242, 242, 1);
			.recode_top_item {
				display: flex;
				flex: 1;
				justify-content: center;
				.time_txt {
					color: #169BD5;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.recode_top_center {
				font-family: 'Arial Normal', 'Arial';
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
		}
		.recode_container {
			padding: 0 30rpx;
			#demo1 {
				padding: 20rpx;
				border-bottom: 1px solid rgba(242, 242, 242, 1);
				.scroll_top {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					line-height: 40rpx;
					.scroll_title {
						font-family: 'Arial Normal', 'Arial';
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}
					.scroll_moeny {
						font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
						font-weight: 700;
						font-size: 28rpx;
						color: #555555;
					}
				}
				.scroll_bottom {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					line-height: 40rpx;
					.scroll_type {
						font-family: 'Arial Normal', 'Arial';
						font-weight: 400;
						font-size: 24rpx;
						color: #AAAAAA;
					}
					
				}
				
			}
			.no_con {
				display: flex; 
				justify-content: center;
				align-items: center;
				padding: 20rpx 0;
				.stu_item_txt {
					font-family: 'Arial Normal', 'Arial';
					font-weight: 400;
					font-size: 26rpx;
					color: #D9D9D9;
				}
			}
		}
	}
	.no_box {
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.scroll_time {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: 24rpx;
		color: #AAAAAA;
	}
</style>
